<template>
  <div>
    <Header></Header>
    <div class="tips">
      <p class="tips-status">系统检测到你还没有开店，请根据一下内容提示进行开店</p>
      <h3>申请开店前，请准备以下资料</h3>
      <hr>
      <div class="tips-items">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card class="box-card">
              <div slot="header" class="header-con clearfix">
                <span>门店照片</span>
              </div>
              <div class="img-con">
                <img src="@/assets/images/img1.png" alt="">
              </div>
              <p>需拍出完整门匾、门框（建议正对门店拍摄）</p>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="box-card">
              <div slot="header" class="header-con clearfix">
                <span>店内照片</span>
              </div>
              <div class="img-con">
                <img src="@/assets/images/img2.png" alt="">
              </div>
              <p>需真实反应用餐环境（收银台、用餐桌椅）</p>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="box-card">
              <div slot="header" class="header-con clearfix">
                <span>门店LOGO</span>
              </div>
              <div class="img-con">
                <img src="@/assets/images/img2.png" alt="">
              </div>
              <p>需体现您店铺的特色，可吸引更多的用户进店点餐</p>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="row2">
          <el-col :span="8">
            <el-card class="box-card">
              <div slot="header" class="header-con clearfix">
                <span>身份证正反面</span>
              </div>
              <div class="img-con">
                <img src="@/assets/images/img4.png" alt="">
              </div>
              <p>1）需清晰展示人物五官和身份证文字信息；<br>2）不可自拍、不可只拍身份证</p>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="box-card">
              <div slot="header" class="header-con clearfix">
                <span>营业执照</span>
              </div>
              <div class="img-con">
                <img src="@/assets/images/img5.png" alt="">
              </div>
              <p>1）需文字清晰、边框完整、露出国徽；<br>2）拍复印件需加盖印章，可用有效特许证件代替</p>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="box-card">
              <div slot="header" class="header-con clearfix">
                <span>卫生许可证（餐饮类店铺需要）</span>
              </div>
              <div class="img-con">
                <img src="@/assets/images/img6.png" alt="">
              </div>
              <p>1）需文字清晰、边框完整、露出国徽；<br>2）拍复印件需加盖印章，可用有效特许证件代替</p>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <el-button class="btn-open" type="primary" round>我已准备好资料，确认申请开店</el-button>
    </div>
  </div>
</template>

<script>
import Header from './Common/Header'
export default {
  name: 'CheckShopStatus',
  components: {
    Header
  }
}
</script>

<style lang="stylus">
  .tips-items .el-card__header
    padding: 10px 20px
    color #666
</style>

<style lang="stylus" scoped>
  @import "../assets/css/base.styl"
  .tips
    width: $width
    margin: 0 auto
    position: relative
    p.tips-status
      text-align: center
      color: #ccc
      font-size: 14px
      padding: 10px 0
    h3
      font-weight: 400
      font-size 18px
      margin-bottom 10px
      color: #909399
    .tips-items
      margin-top 20px
      .row2
        margin-top 16px
      .img-con
        text-align: center
        height: 185px
      p
        font-size 12px
        color: #909399
    .btn-open
      position: relative
      left: 50%
      margin-left: -113px
      margin-top 20px
      bottom: 0
</style>
